<template>
  <div>
    <div class="edit-area marginB15">
          <span class="title">图例显示 </span>
          <el-switch v-model="legendConfig.show" active-color="#13ce66"> </el-switch>
        </div>
        <div class="edit-area">
          <span class="title">布局 </span>
          <div class="font-edit">
            <el-select
              style="width: 90px"
              @change="handleLayout"
              v-model="layoutPosition"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in layoutOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              class="mr15 marginB15"
              style="width: 90px"
              v-model="legendConfig.icon"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in iconOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="edit-area marginB15">
          <span class="title">图例文本 </span>
          <div class="font-edit">
            <el-select
              style="width: 90px"
              v-model="legendConfig.textStyle.fontFamily"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in textOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              class="mr15 marginB15"
              style="width: 90px"
              v-model="legendConfig.textStyle.fontWeight"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in textStyleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-input-number
              class="spacing"
              v-model="legendConfig.textStyle.fontSize"
              :min="1"
              :max="18"
              size="mini"
            ></el-input-number>

            <div class="color-picker mr15">
              <input type="text" v-model="legendConfig.textStyle.color" />
              <el-color-picker size="mini" v-model="legendConfig.textStyle.color"></el-color-picker>
            </div>
          </div>
        </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { throttle } from "lodash";
export default {
  props:['legendConfig'],
  data() {
    return {
      textOptions: [
        {
          value: "serif",
          label: "微软雅黑"
        },
        {
          value: "monospace",
          label: "方正"
        }
      ],
      layoutPosition: null,
      layoutOptions: [
        {
          value: 'top-left',
          label: "顶部居左"
        },
        {
          value: 'top-center',
          label: "顶部居中"
        },
        {
          value:'top-right',
          label: "顶部居右"
        },
        {
          value: 'bottom-left',
          label: "底部居左"
        },
        {
          value:'bottom-center',
          label: "底部居中"
        },
        {
          value: 'bottom-right',
          label: "底部居右"
        }
      ],
      iconOptions: [
        {
          value: "circle",
          label: "圆形"
        },
        {
          value: "rect",
          label: "方形"
        },
        {
          value: "roundRect",
          label: "圆角方形"
        },
        {
          value: "triangle",
          label: "三角形"
        },
      ],
      textStyleOptions: [
        {
          value: "normal",
          label: "正常"
        },
        {
          value: "bold",
          label: "加粗"
        },
        {
          value: "lighter",
          label: "细体"
        }
      ]
    };
  },
  methods: {
    handleLayout() {
      let positionArr=this.layoutPosition.split('-')
      this.legendConfig.top=positionArr[0]
      this.legendConfig.left=positionArr[1]
    },
    addHistory() {
				// console.log('common style change addHistoryCache')
				this.$store.dispatch('addHistoryCache')
			},
  },
  created() {
    this.throttleAddHistory = throttle(this.addHistory, 3000);
  },
  computed: {
    ...mapState({
      // 	projectData: state => state.editor.projectData,
      // 	activePageUUID: state => state.editor.activePageUUID,
      // 	activeElementUUID: state => state.editor.activeElementUUID,
      //activeAttrEditCollapse: state => state.editor.activeAttrEditCollapse
    }),
    ...mapGetters([
      // 'currentPageIndex',
      // 'activeElementIndex',
      // 'activeElement',
      // 'activePage'
      "activeElement",
    ]),
    // labelShow: {
    //   get() {
    //     return this.chartConfig.series[0].label.show;
    //   },
    //   set(val) {
    //     this.chartConfig.series.forEach(v => {
    //       v.label.show = val;
    //     });
    //   }
    // },
    // fontFamily: {
    //   get() {
    //     return this.chartConfig.series[0].label.fontFamily;
    //   },
    //   set(val) {
    //     this.chartConfig.series.forEach(v => {
    //       v.label.fontFamily = val;
    //     });
    //   }
    // },
    // fontWeight: {
    //   get() {
    //     return this.chartConfig.series[0].label.fontWeight;
    //   },
    //   set(val) {
    //     this.chartConfig.series.forEach(v => {
    //       v.label.fontWeight = val;
    //     });
    //   }
    // },
    // color: {
    //   get() {
    //     return this.chartConfig.series[0].label.color;
    //   },
    //   set(val) {
    //     this.chartConfig.series.forEach(v => {
    //       v.label.color = val;
    //     });
    //   }
    // },
    // fontSize: {
    //   get() {
    //     return this.chartConfig.series[0].label.fontSize;
    //   },
    //   set(val) {
    //     this.chartConfig.series.forEach(v => {
    //       v.label.fontSize = val;
    //     });
    //   }
    // }
  }
};
</script>

<style lang='scss' scoped>
.edit-area {
  display: flex;
  width: 300px;
  .right {
    margin-right: auto;
  }
  .color-picker-long {
    display: inline-block;
    width: 195px;
    display: flex;
    justify-content: space-between;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    input {
      outline: transparent;
      border: transparent;
      // width: 60px;
      padding-left: 10px;
    }
  }
  .font-edit {
    width: 230px;
    display: flex;
    flex-flow: wrap;
    .color-picker {
      display: inline-block;
      width: 90px;
      display: flex;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      input {
        outline: transparent;
        border: transparent;
        width: 60px;
        padding-left: 10px;
      }
    }
  }
}
.mr15 {
  margin-left: 15px;
}
.spacing {
  width: 90px;
}
.title {
  width: 70px;
}
</style>